<!-- 个性主题页 -->
<!-- 小默子 2020/8/22 -->
<template>
	<view>
		<view class="default">
			<text>更换配色：</text>
			<view class="colorBox">
				<view  v-for="(item,index) in colorList" :key="index">
					<view v-bind:style="{backgroundColor:theme(index)}" class="theme" @tap="changeColor(index)">
						{{item.colorName}}
					</view>		
				</view>
				
			</view>
		</view>
		<view class="backImg">
			<text>上传名片背景</text>
		</view>
	</view>
</template> 

<script>
	export default {
		data() {
			return {
				colorList:[
					{colorName:'#F76B8A'},
					{colorName:'#F38181'},
					{colorName:'#F9B8BE'},
					{colorName:'#B793E6'},
					{colorName:'#A3DE83'},
					{colorName:'#78BBE6'},
					{colorName:'#769FCD'},
					{colorName:'#00649F'}
				]
			}
		},
		methods: {
			theme(index) {
				return this.colorList[index].colorName;
			},
			changeColor(index) {
				
			}
		}
	}
</script>

<style lang="less">
	.default {
		margin: 30rpx 20rpx 0 20rpx;
		text {
			font-size: @uni-font-size-lg;
			font-weight: bolder;
		}
	}
	.colorBox {
		margin-top: 30rpx;
		display: grid;
		grid-template-columns: repeat(4,150rpx);
		grid-template-rows: repeat(2,100rpx);
		justify-content: space-between;
		grid-row-gap: 20px;
		.theme {
			border-radius: @uni-border-radius-lg;
			color: @uni-text-color-inverse;
			line-height: 100rpx;
			text-align: center;
			background-color: ;
		}
		.theme1 {
			background-color: #F76B8A;
		} 
		.theme2 {
			background-color: #F38181;
		} 
		.theme3 {
			background-color: #F9B8BE;
		}
		.theme4 {
			background-color: #B793E6;
		} 
		.theme5 {
			background-color: #A3DE83;
		} 
		.theme6 {
			background-color: #78BBE6;
		} 
		.theme7 {
			background-color: #769FCD;
		} 
		.theme8 {
			background-color: #00649F;
		} 
	}
	
	.backImg {
		margin: 50rpx 20rpx 0 20rpx;
		text {
			font-size: @uni-font-size-lg;
			font-weight: bolder;
		}
	}
</style>
